<template>
<!--礼品卡金卡-->
  <div>
    <order>
      <p class="des">说明</p>
      <ul class="deslist">
        <li>1.礼品卡可激活自己使用或转赠他人。</li>
      </ul>
      <p class="liaojiemore">了解更多，请点击 <span>我的礼品卡</span></p>
      <p class="bottom"><router-link to="/wanshanziliao" tag="span">激活</router-link><router-link to="/zhuanzeng" tag="span">转赠</router-link></p>
    </order>
  </div>
</template>

<script type="text/ecmascript-6">
  import order from '../../offertemplate/jinkaorder'
    export default {
        name: 'lipin',
        props: {},
        data() {
            return {};
        },
        methods: {},
        created() {

        },
        components: {
          order
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .des{
    font-size: 18px;
    color: #111;
    text-align: left;
    padding: 10px;
  }
  .deslist{
    font-size: 13px;
    color: #666;
    text-align: left;
    padding:0 10px 10px;
    line-height: 25px;
  }
  .liaojiemore{
    margin: 10px;
    padding-top: 10px;
    text-align: center;
    border-top: 1px solid #eee;
    span{
      color: #ff8551;
    }
  }
  .bottom{
    position: fixed;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    display: flex;
    width: 100%;
    font-size: 17px;
    span{
      flex: 1;
      width: 50%;
      display: inline-block;

    }
    :first-child{
      color: #2d93f0;
    }
    :last-child{
      color: #fff;
      background-image: linear-gradient(to left, #4c92ed,#61beec);
    }

  }
</style>
